<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      姓：<input
        type="text"
        placeholder="firstName"
        v-model="firstName"
      /><br />
      名：<input type="text" placeholder="lastName" v-model="lastName" /><br />
      <!-- 全名:<input type="text" placeholder="fullName" v-model="fullName" /><br/> -->
       全名1:<input
        type="text"
        placeholder="fullName1"
        v-model="fullName1" 
      /><br />
      全名2:<input type="text" placeholder="fullName2" v-model="fullName2" />
    </div>
    <script src="./vue.js"></script>
    <script>
      /*
			在对象中，每一个属性都有一个setter和getter   
				setter:set(){
					return value
				}：set函数在属性值发生变化的时候执行
				getter:get(){}: get在获取属性的时候执行
		*/
      //   var obj = {
      //     naem: 'leo',
      //     age: 13
      //   };
      //   obj.name; //获取name值执行了get函数
      //   obj.age = 20; //修改属性的时候执行了set函数
      var vm = new Vue({
        el: '#app',
        data: {
          firstName: '',
          lastName: ''
        },
        methods: {},
        computed: {
            fullName(){
          	  return this.firstName + "" + this.lastName
            } ,
          fullName1() {
            return this.firstName + '  ' + this.lastName;
          },
          fullName2: {
            get() {
              if (this.lastName !== undefined) {
                return this.firstName + ' ' + this.lastName;
              } else {
                this.lastName = this.firstName;
                return this.lastName;
              }
            },
            set(newVal) {
              //这个函数接受一个参数，这个参数是你改以后的新值
              console.log(newVal);
              var arr = newVal.split(' ');
              this.firstName = arr[0];
              this.lastName = arr[1];
            }
          }
        }
      });
    </script>
  </body>
</html>
